<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客服会话管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
            display: none;
        }
        .success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .info {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
        .session-info {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 15px;
            border-radius: 4px;
            margin-top: 15px;
        }
        .status-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }
        .status-ai {
            background-color: #28a745;
            color: white;
        }
        .status-human {
            background-color: #dc3545;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🤖 AI客服会话管理</h1>
            <p>人工客服专用管理界面</p>
        </div>

        <div class="form-group">
            <label for="customerId">客户ID:</label>
            <input type="text" id="customerId" placeholder="请输入客户ID">
        </div>

        <div class="form-group">
            <label for="servicerId">客服ID:</label>
            <input type="text" id="servicerId" placeholder="请输入您的客服ID">
        </div>

        <div class="form-group">
            <button onclick="getSessionStatus()">📊 查看会话状态</button>
            <button onclick="switchToAI()">🤖 转回AI客服</button>
            <button onclick="clearResult()">🗑️ 清除结果</button>
        </div>

        <div id="result" class="result"></div>
        <div id="sessionInfo" class="session-info" style="display: none;"></div>
    </div>

    <script>
        const API_BASE = 'http://aiservice.chasingbrilliant.com/api';

        function showResult(message, type = 'info') {
            const resultDiv = document.getElementById('result');
            resultDiv.className = `result ${type}`;
            resultDiv.textContent = message;
            resultDiv.style.display = 'block';
        }

        function clearResult() {
            document.getElementById('result').style.display = 'none';
            document.getElementById('sessionInfo').style.display = 'none';
        }

        async function getSessionStatus() {
            const customerId = document.getElementById('customerId').value.trim();
            if (!customerId) {
                showResult('请输入客户ID', 'error');
                return;
            }

            try {
                const response = await fetch(`${API_BASE}/session_status/${customerId}`);
                const data = await response.json();

                if (data.success) {
                    const sessionInfo = data.session_info;
                    const statusBadge = sessionInfo.is_human_service ? 
                        '<span class="status-badge status-human">人工服务</span>' : 
                        '<span class="status-badge status-ai">AI服务</span>';

                    const sessionInfoDiv = document.getElementById('sessionInfo');
                    sessionInfoDiv.innerHTML = `
                        <h3>📊 会话状态信息</h3>
                        <p><strong>客户ID:</strong> ${sessionInfo.customer_id}</p>
                        <p><strong>当前状态:</strong> ${statusBadge}</p>
                        <p><strong>最后活动:</strong> ${sessionInfo.last_activity}</p>
                        <p><strong>对话数量:</strong> ${sessionInfo.conversation_count}</p>
                        ${sessionInfo.human_service_start ? 
                            `<p><strong>人工服务开始:</strong> ${sessionInfo.human_service_start}</p>` : ''}
                        ${sessionInfo.auto_switch_back_time ? 
                            `<p><strong>自动转回时间:</strong> ${sessionInfo.auto_switch_back_time}</p>` : ''}
                    `;
                    sessionInfoDiv.style.display = 'block';
                    showResult('会话状态获取成功', 'success');
                } else {
                    showResult(`获取会话状态失败: ${data.message}`, 'error');
                }
            } catch (error) {
                showResult(`请求失败: ${error.message}`, 'error');
            }
        }

        async function switchToAI() {
            const customerId = document.getElementById('customerId').value.trim();
            const servicerId = document.getElementById('servicerId').value.trim();

            if (!customerId) {
                showResult('请输入客户ID', 'error');
                return;
            }

            try {
                const response = await fetch(`${API_BASE}/switch_to_ai`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        customer_id: customerId,
                        servicer_id: servicerId
                    })
                });

                const data = await response.json();

                if (data.success) {
                    showResult(`✅ ${data.message}`, 'success');
                    // 自动刷新会话状态
                    setTimeout(getSessionStatus, 1000);
                } else {
                    showResult(`❌ ${data.message}`, 'error');
                }
            } catch (error) {
                showResult(`请求失败: ${error.message}`, 'error');
            }
        }

        // 页面加载时的提示
        window.onload = function() {
            showResult('👋 欢迎使用AI客服会话管理系统！请先输入客户ID查看状态。', 'info');
        };
    </script>
</body>
</html> 